<template>
  <div id="cesium-container" ref="cesiumContainer">
    <!-- <div class="baseinfo">
      <span>经度: {{ baseInfo.lon }}</span>
      <span>纬度: {{ baseInfo.lat }}</span>
      <span>海拔: {{ baseInfo.height }}米</span>
      <span>层级: {{ baseInfo.level }}级</span>
      <span>方向: {{ baseInfo.dir }}°</span>
      <span>俯仰角: {{ baseInfo.pitch }}°</span>
      <span>视高: {{ baseInfo.vheihgt }}米</span>
    </div> -->
    <!-- 右击菜单 -->
    <!-- <rightMenuVue ref="rightMenuVue" @handleProcs="handleProcs"></rightMenuVue> -->
  </div>
</template>

<script>
// import Vue from "vue";
import initCesium from "@/common/cesiumViewer/index";

// const rightMenuVue = () => import("./rightMenu.vue");

let cesiumViewer = null;
let hoverPop = null;
// let weather = null;
export default {
  name: "cesium-container",
  components: {},
  data() {
    return {
      baseInfo: {
        lon: 0,
        lat: 0,
        height: 0,
        level: 0,
        dir: 0,
        pitch: 0,
        vheihgt: 0,
      },
      cesiumcComplete: false,
      sectionVisible: false,
      stationInfoName: "",
      hoverVisible: false,
      client: {},
      stationInfo: {},
    };
  },
  mounted() {
    const baseInfoCb = (info) => {
      this.baseInfo = { ...info };
    };
    // 地图数据基本信息
    cesiumViewer = new initCesium(this.$refs.cesiumContainer, {
      dmPickCb: "",
      baseInfoCb: baseInfoCb,
      leftClick: this.leftClick,
      mouseMove: this.mouseMove,
    });
    this.cesiumcComplete = true;
    window.cesiumViewer = cesiumViewer;
  },
  methods: {
    leftClick() {
      console.log("leftClick");
    },
    mouseMove() {
      console.log("mouseMove");
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
#cesium-container {
  height: 100%;
  width: 100%;
  position: absolute;

  .baseinfo {
    position: fixed;
    z-index: 10;
    right: 0;
    bottom: 0;
    left: 0;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 5px;
    background: rgba(0, 0, 0, 0.3);
    padding-right: 110px;
    span {
      color: #cfffff;
      margin: 0 10px;
      font-size: 12px;
    }
  }
}
</style>
